<template>
	<view class="mine">
		
		<view class="mine-header" @click="Revise()">
			<image :src="portrait" class="portrait"></image>
			<view class="mine-txt">
				<text class="mineName">{{mineName}}</text>
				<text class="mineAutograph">{{mineAutograph}}</text>
			</view>
		</view>
		
		<view class="mine-common">
			<view class="follow">
				{{follow}}
				<text>我的关注</text>
			</view>
			<view class="follow">
				{{fans}}
				<text>我的粉丝</text>
			</view>
			<button type="default" plain="false" size="mini" class="followBtn" @click="release()">+发布游记</button>
		</view>
		
		<view class="mine-list">
			<navigator v-for="(item, index) in mineList" :key="index" class="mine-type">
				<view class="mine-number">{{item.number}}</view>
				<view class="mine-title">{{item.title}}</view>
			</navigator>
		</view>
		<!-- 列表 -->
		<listBox :fallList="fallList"></listBox>
		
	</view>
</template>

<script>
import listBox from '@/components/fallList/list.vue'
export default {
	components:{
		listBox
	},
	data() {
		 return {
			 portrait:'https://b1-q.mafengwo.net/s15/M00/32/4D/CoUBGV3qZgGAWN3mAAc8NR-YDhU219.jpg',
			 mineName:'爱生活的小美女1',
			 mineAutograph:'写下你想对世界说的话，就现在',
			 follow:'25',
			 fans:'11.2w',
			 mineList:[],
			 fallList:[]
		}
	},
	onLoad() {
		this.mineData();
		this.fallData();
	},
	methods: {
		mineData(){
			   uni.request({
				//url:"/api/yilong888/jsonSrc/raw/master/mine.json",
				url:'http://mock-api.com/aKbvjYKx.mock/api/mine',
				method: 'get',
				dataType: 'JSON',
				//data:postData,
				 data:{
					text:'uni.request',
				}, 
				header: {
				    //'custom-header': 'hello' //自定义请求头信息
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: (res) => {
					console.log(res.data);
					// 将请求到的数据存放放到mineList中
					this.mineList = eval(res.data);
				}
			}); 
		}, 
		//游记接口
		 fallData(){
			   uni.request({
				//url:"/api/yilong888/jsonSrc/raw/master/mineTravels.json",
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/mineList',
				method: 'POST',
				//dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},
				success: (res) => {
					console.log(res.data);
					// 将请求到的数据存放放到fallList中
					this.fallList = eval(res.data);
				}
			}); 
		}, 
		//个人主页
		release(e){
			console.log(e)
			// var newsid = e.currentTarget.dataset.newsid;
			uni.navigateTo({
				url:"/pages/release/index",
				// url:"../component/classdetails/classdetails?newsid="+ newsid,
				//success:res =>{},
			   // fail:() =>{},
				//complete:() => {}
			});
		},
		//编辑资料
		Revise(e){
			console.log(e)
			uni.navigateTo({
				url:"/pages/Edit/index",
			});
		},
	}
}
</script>

<style  lang="scss">
@import "../../icon/iconfont.css";
.mine{
	width: 100%;
	background: -webkit-gradient(linear, bottom right, from(#19c1e6), to(#31a6f2), to(#4095f9));  
	background: -o-linear-gradient(left right, #19c1e6, #31a6f2, #4095f9);  
	background: linear-gradient(to right bottom,#19c1e6 20%,#31a6f2, #4095f9);
	.mine-header{
		width: 100%;
		position: relative;
		padding: 150rpx 0 60rpx;
		.portrait{
			border-radius: 100%;
			width: 108rpx;
			height: 108rpx;
			border: 5rpx solid #FFFFFF;
			position: absolute;
			left: 30rpx;
		}
		.mine-txt{
			margin-left: 170rpx;
			padding-top: 6rpx;
			letter-spacing: $uni-spacing-row-dm;
			position: relative;
			::after{
				content: '';
				position: absolute;
				top: 50rpx;
				right: 40rpx;
				width: 14rpx;
				height: 14rpx;
				border-top: 2rpx solid #FFFFFF;
				border-right: 2rpx solid #FFFFFF;
				transform: rotate(45deg);
				
			}
			.mineName{
				font-size: $uni-font-size-rty;
				display: block;
				line-height: 60rpx;
				color: $uni-text-color-inverse;
			}
			.mineAutograph{
				font-size: $uni-font-size-six;
				display: block;
				color: $uni-text-color-white;
			}
		}
	}
	.mine-common{
		margin-left: 30rpx;
		position: relative;
		.follow{
			display: inline-block;
			color: $uni-text-color-inverse;
			font-size:$uni-font-size-thirty;
			padding: 0 80rpx 30rpx 0;
			text-align: center;
			letter-spacing: $uni-spacing-row-xm;
			text{
				font-size: $uni-font-size-base;
				color: $uni-text-color-white;
				display: block;
				letter-spacing: $uni-spacing-row-dm;
			}
		}
		.followBtn{
			position: absolute;
			right: 38rpx;
			top:14rpx;
			color: $uni-text-color-inverse;
			border: none;
			letter-spacing: $uni-spacing-row-dm;
			background:linear-gradient(90deg,#ff9d4e,#ff7156,#ff4B5e);
		}
	}
	.mine-list{
		background-color: $uni-bg-color;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		.mine-type{
			display: inline-block;
			width: 25%;
			text-align: center;
			letter-spacing: $uni-spacing-row-xm;
			padding: 30rpx 0;
			border-bottom: 2rpx solid $uni-bg-color-grey;
			.mine-number{
				color: $uni-text-color;
				font-size: $uni-font-size-lg;
			}
			.mine-title{
				padding-top: $uni-spacing-row-dm;
				color: $uni-text-color-placeholder;
				font-size: $uni-font-size-sm;
			}
		}
	}
	.fallList{
		width: 96%;
		padding:2% 2% 0;
	}
}
	
</style>
